<template>
  <h1>猜数字练习</h1>
  <input type="text" placeholder="请输入您猜的数字" v-model="num">
  <button @click="guess"> 猜一猜</button>
  <h3>你猜的结果是{{result}}</h3>

</template>

<script setup>
import {ref} from 'vue'

//随机生成一个数字
let random = parseInt(Math.random()*100)+ 1;
console.log(random);
//定义一个变量用来保存用户输入的数字
const  num = ref('');
//定义变量来保存显示的结果
const result = ref('');
//定义猜数字的方法
const guess =() => {
  if (num.value.trim() == '' || isNaN(num.value)) {
    num.value = '';//清空输入框
    alert('请输入数字!');
    return;
  }
  if (num.value < random) {
    result.value = '猜小了！';
  } else if (num.value > random) {
    result.value = '猜大了！';
  } else {
    result.value = '恭喜你，猜对了!';
  }
}


</script>

<style scoped>

</style>